<template>
    <div class="student-container">
        <BreadCrumb :currentPath="currentPath"></BreadCrumb>
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="姓名">
                <el-input v-model="formInline.user" placeholder="姓名"></el-input>
            </el-form-item>
            <el-form-item label="班级">
                <el-select v-model="formInline.user" placeholder="请选择班级">
                    <el-option
                        v-for="item in classList"
                        :key="item.id"
                        :label="item.cname"
                        :value="item.cno"
                    ></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="课时">
                <el-select v-model="formInline.region" placeholder="选择" style="width:30%">
                    <el-option label="大于" value="1"></el-option>
                    <el-option label="小于" value="2"></el-option>
                </el-select>
                <el-input v-model="formInline.user" placeholder="课时" style="width: 40%;"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">查询</el-button>
            </el-form-item>
        </el-form>
        <el-table :data="studentList" style="width: 100%" :row-class-name="tableRowClassName">
            <el-table-column type="index" label="序号"></el-table-column>
            <el-table-column prop="sname" label="姓名"></el-table-column>
            <el-table-column prop="sage" label="年龄"></el-table-column>
            <el-table-column prop="phone" label="手机号"></el-table-column>
            <el-table-column label="班级">
                <template slot-scope="scope">
                    <div v-for="item in classList" :key="item.id">
                        <div v-if="item.cno == scope.row.cno">{{ item.cname }}</div>
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="tno" label="教师">
                <template slot-scope="scope">
                    <div v-for="item in teacherList" :key="item.id">
                        <div v-if="item.tno == scope.row.tno">{{ item.tname }}</div>
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="course" label="剩余课时" align="center"></el-table-column>
            <el-table-column prop="lno" label="科目" align="center"></el-table-column>
            <el-table-column prop="address" label="地址"></el-table-column>
            <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                    <div class="btn-box">
                        <el-button type="success" plain @click="update(scope.row)">修改</el-button>
                        <el-button type="danger" plain @click="deleteStu(scope.row)">删除</el-button>
                    </div>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
            @current-change="handleCurrentChange"
            :current-page="pageIndex"
            :page-size="10"
            layout="total, prev, pager, next, jumper"
            :total="total"
        ></el-pagination>
    </div>
</template>

<script>
import { getAllStudent } from "@/api/studentApi.js"
import { getAllTeacher } from "@/api/teacherApi.js"
import { getAllClass } from "@/api/classApi.js"
import BreadCrumb from "@/components/BreadCrumb.vue"
export default {
    components: {
        BreadCrumb
    },
    data() {
        return {
            currentPath: [
                { name: "学生管理" },
                { name: "学生列表" },
            ],
            formInline: {
                user: '',
                region: '2'
            },
            studentList: [],
            classList: [],
            teacherList: [],
            className: '',
            pageIndex: 1,
            total: 0
        }
    },
    created() {
        this.init()
    },
    methods: {
        async init() {
            try {
                let res = await getAllStudent(this.pageIndex)
                if (res.data.status == 0) {
                    this.studentList = res.data.data
                    this.total = res.data.total
                }else{
                    this.$message.error(res.data.msg)
                }
                let res1 = await getAllTeacher()
                if (res1.data.status == 0) {
                    this.teacherList = res1.data.data
                }else{
                    this.$message.error(res1.data.msg)
                }
                let res2 = await getAllClass()
                if (res2.data.status == 0) {
                    this.classList = res2.data.data
                }else{
                    this.$message.error(res2.data.msg)
                }

            } catch (e) {
                this.$message.error(e)
            }
        },
        onSubmit() {
            console.log('submit!');
        },
        update(val) {
            console.log(val);
        },
        deleteStu(val) {
            console.log(val);

        },
        tableRowClassName({ row, rowIndex }) {
            if (rowIndex === 1) {
                return 'warning-row';
            } else if (rowIndex === 3) {
                return 'success-row';
            }
            return '';
        },
        async handleCurrentChange(val) {
            try {
                let res = await getAllStudent(val)
                if (res.data.status == 0) {
                    this.studentList = res.data.data
                    this.total = res.data.total
                }
            } catch (e) {
                this.$message.error(e)
            }
        }
    },

}
</script>

<style lang="scss" scoped>
.student-container {
    .el-table .warning-row {
        background: oldlace;
    }

    .el-table .success-row {
        background: #f0f9eb;
    }
    .btn-box {
        display: flex;
        justify-content: space-around;
    }
}
